<template>
  <div>
    <el-container>
      <el-header>
        <span class="One"> James后台管理 </span>
        <div class="right">
          <span v-show="this.$store.state.user">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            {{ this.$store.state.user }}
          </span>
          <span class="btn">
            <el-button type="primary" v-show="!this.$store.state.user" @click="Login"
              >登录</el-button
            >
            <el-button type="info" v-show="this.$store.state.user" @click="Logout"
              >退出</el-button
            >
          </span>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="!isCollapse ? '200px' : '64px'">
          <p>
            <i class="el-icon-s-unfold" @click="hove"></i>
          </p>
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo grad1"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            :collapse="isCollapse"
          >
            <el-submenu :index="item.path" v-for="(item, index) in menus" :key="index">
              <template slot="title">
                <i :class="icon[index]" />
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item-group class="grad1">
                <el-menu-item
                  :index="'/' + items.path"
                  v-for="(items, index) in item.children"
                  :key="index"
                >
                  <i :class="iconz[index]"></i>
                  {{ items.authName }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 面包屑 -->
          <Crumbs :bread="$route.meta.bread" />
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Crumbs from "@/components/BreadcrumbNav/Crumbs.vue";
export default {
  components: { Crumbs },
  name: "",
  data() {
    return {
      isCollapse: false,
      menus: [],
      icon: [
        "el-icon-user-solid",
        "el-icon-info",
        "el-icon-s-goods",
        "el-icon-s-claim",
        "el-icon-s-marketing",
      ],
      iconz: [
        "el-icon-menu",
        "el-icon-user",
        "el-icon-s-order",
        "el-icon-document-checked",
        "el-icon-data-line",
      ],
    };
  },
  mounted() {
    //侧边栏数据请求
    this.$http.get("menus").then((res) => {
      this.menus = res.data.data;
    });
  },
  methods: {
    //侧边栏折叠状态
    hove() {
      this.isCollapse = !this.isCollapse;
    },
    //登录
    Login() {
      this.$router.push("/login"); //跳转到登录页面
    },
    // 退出
    Logout() {
      this.$message.success("退出成功");
      this.$store.commit("remuser");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.el-header {
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(-90deg, skyblue, rgb(250, 166, 154));
  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      margin-left: 15px !important;
    }
  }
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  overflow: hidden;

  transition: all 1s;
  ul {
    width: 100%;
    height: 100%;
    border-right: none;
  }
  p {
    text-align: center;
    margin: 0 !important;
    i:hover {
      color: skyblue;
      transition: all 1s;
    }
  }
}

.el-main {
  height: 100%;
  background: linear-gradient(to left, #d3959b, #bfe6ba);
  color: #333;
  overflow: auto;
  .el-breadcrumb {
    margin-bottom: 15px;
  }
}

.is-vertical {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.One {
  font-size: 30px;
  background: linear-gradient(to right, red, blue);
  background-clip: text;
  color: transparent;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.grad1 {
  background-color: red; /* 浏览器不支持时显示 */
  background-image: linear-gradient(0deg,#e66465, #9198e5);
  i{
    color:skyblue
  }
}
</style>
